/*
Skin Name: Default
*/

/*  Table of Contents 
01. Responsive Max Width
02. Main Backgrounds
03. Borders
04. Button/Font Colors
05. Playlist Backgrounds & Fonts
06. Progress/Volume Bar Backgrounds
07. Player Height
08. Button Sizes
*/


/*
=============================================== 01. Responsive Max Width ===============================================
*/
/* body .responsive-wrapper {max-width:550px;} */

/*
=============================================== 02. Main Backgrounds ===============================================
*/
/* Main Background Color */
body .mejs-container.progression-skin.progression-minimal-dark .mejs-controls {
	background:#202020; opacity:0.5; /* IE Fall-Back */
}

/* Button Hover Background Color */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-nexttrack:hover, body .progression-skin.progression-minimal-dark .mejs-controls .mejs-prevtrack:hover,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-show-playlist:hover, body .progression-skin.progression-minimal-dark  .mejs-controls .mejs-hide-playlist:hover,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-mute button:hover,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-fullscreen-button:hover,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-hide-playlist, body .progression-skin.progression-minimal-dark .mejs-controls .mejs-playpause-button:hover {
	background: #2a2a2a; /* IE Fall-Back */
}
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-nexttrack, body .progression-skin.progression-minimal-dark .mejs-controls .mejs-prevtrack,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-show-playlist, body .progression-skin.progression-minimal-dark  .mejs-controls .mejs-hide-playlist,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-mute button,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-fullscreen-button,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-hide-playlist, body .progression-skin.progression-minimal-dark .mejs-controls .mejs-playpause-button {
	-webkit-transition-duration: 200ms;
	-webkit-transition-property: background;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-duration: 200ms;
	-moz-transition-property: background;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-duration: 200ms;
	-o-transition-property: background;
	-o-transition-timing-function: ease-in-out;
	transition-duration: 200ms;
	transition-property: background;
}

/*
=============================================== 03. Borders ===============================================
*/
/* Main Outline Border */
body .mejs-container.progression-skin.progression-minimal-dark, body .mejs-container.progression-skin.progression-minimal-dark .mejs-controls  {
	border-color:#202020;
}

/* Button Borders */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-playpause-button, body .progression-skin.progression-minimal-dark .mejs-inner .mejs-controls .mejs-time, body .progression-skin.progression-minimal-dark .mejs-controls .mejs-fullscreen-button,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-show-playlist, body .progression-skin.progression-minimal-dark  .mejs-controls .mejs-hide-playlist, body .progression-skin.progression-minimal-dark .mejs-controls .mejs-prevtrack button,  body .progression-skin.progression-minimal-dark .mejs-controls .mejs-nexttrack button {
	border-color:transparent;
}


/*
=============================================== 04. Button/Font Colors ===============================================
*/
/* Main Button Color */
body .progression-skin.progression-minimal-dark .mejs-controls button {color:#eeeeee;}

/* Main Button Hover Color */
body .progression-skin.progression-minimal-dark .mejs-controls button:hover {
	color:#ffffff;
}

/* Timer Color 00:00 */
body .progression-skin.progression-minimal-dark .mejs-inner .mejs-time .mejs-currenttime, body .progression-skin.progression-minimal-dark .mejs-inner .mejs-time  .mejs-duration {
	color:#ffffff;
}


/*
=============================================== 05. Playlist Backgrounds & Fonts ===============================================
*/
/* PlayList Borders */
body .progression-skin.progression-minimal-dark .mejs-playlist ul, body .progression-skin.progression-minimal-dark .mejs-playlist li {
	border-color:#202020;
}

/* PlayList Background */
body .progression-skin.progression-minimal-dark .mejs-playlist, body .progression-skin.progression-minimal-dark .mejs-playlist ul { 
	background: #202020;
}

/* PlayList Font Color */
body .progression-skin.progression-minimal-dark .mejs-playlist li { color: #999999;  background-color: rgba(250, 250, 250, 0.1);}

/* PlayList Hover Background */
body .progression-skin.progression-minimal-dark .mejs-playlist li:hover {
	background-color: #000000;
	background-color: rgba(250, 250, 250, 0.15);
}

/* PlayList Current Selected Item */
body .progression-skin.progression-minimal-dark .mejs-playlist li.current {
	color:#ffffff;
	background:#000000;
	background: rgba(0, 0, 0, 0.35);
}


/*
=============================================== 06. Progress/Volume Bar Backgrounds ===============================================
*/
/* Main Progress Bar Background */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-time-rail .mejs-time-total {
	background:#5c5c5c; /* IE Fall-Back */
	-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
	box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
}

body .progression-skin.progression-minimal-dark .mejs-controls .mejs-playpause-button  {margin-right:0px;}

/* Main Progress Bar Loading Background */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-time-rail .mejs-time-loaded { 
	-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
	box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
	background:#4c4c4c; /* IE Fall-Back */

}

/* Main Progress Bar Currently Played Background */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-time-rail .mejs-time-current {
	-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
	box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
	background:#c2c2c2; /* IE Fall-Back */
}

/* Main Progress Bar Handle */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-time-rail .mejs-time-handle  {
	display: block; margin: 0; padding:0px; border: 0;
	width: 2px;
	height: 2px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	top:-1px;
	left:-6px;
	-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0);
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0);
	border:5px solid #ededed;
	background: #ededed;	
	
}

/* Volume Bar Background Default */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	background:#5c5c5c; /* IE Fall-Back */
	-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
	box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
}

/* Volume Bar Background Volume On */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background:#c2c2c2; /* IE Fall-Back */
	-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
	box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0);
}


/* Volume Bar Volume Handle */
body .progression-skin.progression-minimal-dark .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
	display: block;
	position: absolute;
	width: 4px;
	height:4px;
	margin-left:-3px;
	top:10px;
	background: #ededed;	
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0);
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0);
	border:3px solid #ededed;
	text-align: center;
}
